<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>table</title>
		<link rel="stylesheet" href="css/reset.css" />
		<style>
			#app{width: 500px;margin: 0 auto;padding: 20px 0;}
			.form-group{padding: 7px 0;}
			.form-group label{display: inline-block;width: 42px;}
			.form-group input{padding: 5px;height: 20px;border: 1px solid #ccc;}
			table{width: 100%;border-collapse:collapse;border: 1px solid #ccc;}
			table th,table td{width: 25%;padding:8px 0;text-align: center;border: 1px solid #ccc;}
			table th{background: #673AB7;color: #fff;}
		</style>
	</head>
	<body>
		<div id="app">
			<fieldset>
				<legend>Create New Person</legend>
			</fieldset>
			<div class="form-group">
				<label>Name:</label>
				<input type="text" v-model="newPerson.name" />
			</div>
			<div class="form-group">
				<label>Age:</label>
				<input type="text" v-model="newPerson.age" />
			</div>
			<div class="form-group">
				<label>Sex:</label>
				<select v-model="newPerson.sex">
					<option value="Male">Male</option>
					<option value="Female">Female</option>
				</select>
			</div>
			<div class="form-group">
				<label></label>
				<button @click="createPerson">Create</button>
			</div>
		
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Age</th>
						<th>Sex</th>
						<th>Delete</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="person in people">
						<td>{{ person.name }}</td>
						<td>{{ person.age }}</td>
						<td>{{ person.sex }}</td>
						<td :class="'text-center'"><button @click="deletePerson($index)">Delete</button></td>
					</tr>
				</tbody>
			</table>
		</div>
		<!--<script src="js/vue.js"></script>-->
		<script src="js/lib/vue.js"></script>
		<script>
			var vm = new Vue({
				el: "#app",
				data: {
					newPerson:{
						name: '',
						age: 0,
						sex: 'Male'
					},
					people:[{
						name: 'Jack',
						age: 30,
						sex: 'Male'
					},{
						name: 'Bill',
						age: 26,
						sex: 'Female'
					},{
						name: 'Tommy',
						age: 28,
						sex: 'Female' 
					},{
						name: 'Chris',
						age: 32,
						sex: 'Male'
					}]
				},
				methods:{
					createPerson: function(){
						this.people.push(this.newPerson);
						this.newPerson = {name:'',age:0,sex:'Male'}
					},
					deletePerson: function(index){
						this.people.splice(index,1);
					}
					
				}
			});
		</script>
	</body>
</html>